<template>
  <div class="app">
    <div class="kd">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- <el-form-item label="快递公司" prop="type">
          <el-input
            placeholder="选填自动识别"
            v-model="ruleForm.type"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="快递单号" prop="number">
          <el-input required v-model="ruleForm.number"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="收件人手机号" prop="user">
          <el-input required v-model="ruleForm.num"></el-input>
        </el-form-item> -->
        <el-form-item label="手机号" prop="mobile">
          <el-input
            placeholder="必填手机号"
            v-model="ruleForm.num"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="success" :disabled="flag ? false : true" @click="get"
        >查询物流信息</el-button
      >
    </div>

    <el-dialog title="快递信息" :visible.sync="dialogVisible" width="100%">
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(item, index) in kdMsg"
          :key="index"
          :timestamp="item.time"
        >
          {{ item.status }}
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="cancel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import $ from "jquery";
var xl = require('xlsx');
import ems from './ems'

export default {
  data() {
    
    return {
      dialogVisible: false,
      kdMsg: [],
      ruleForm: {
        key: "8sBBG8MCkikfkUMj9WQRs6Zgh",
        type: "",
        number: "",
        mobile: "",
        num:""
      },
      flag: true,
    };
  },
  created(){
  },
  methods: {
          excel(num){
            ems.forEach(element => {
              if (element.tel == num){
                this.ruleForm.number = element.no;
              }
            });
          },
    req() {
      if (this.ruleForm.type.trim().length == 0) this.ruleForm.type = "auto";
      console.log(this.ruleForm.num);
      this.excel(this.ruleForm.num);
      $.ajax({
        type: "post",
        url: "https://binstd.apistd.com/express/query",
        data: this.ruleForm,
        dataType: "jsonp",
        success: (res) => {
          if (res.status == 0) {
            this.dialogVisible = true;
            this.kdMsg = res.result.list;
          } else if (this.ruleForm.number.trim().length == 0) {
            this.$message.error("当前没有您的单号，请检查输入的手机号!");
          } else {
            this.$message.error(res.msg);
          }
        },
        error: (err) => {
          console.log(err);
        },
      });
    },
    async get() {
      if (this.flag) {
        this.req();
        this.flag = false;
      }
      setTimeout(() => {
        this.flag = true;
      }, 1000 * 10);
    },
    cancel() {
      this.dialogVisible = false;
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style scoped>

.kd {
  margin-top: 30px;
}
.el-button {
  margin: 10px 0 0 100px;
}
.el-form-item__content{
  width:100%
}
.el-input{
  width:100%
}
</style>
